<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/12
  Time: 18:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生管理</title>
    <%@include file="../../common/header.jsp"%>
    <%@include file="../../common/ruoyi.jsp"%>
</head>
<body>

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="stuform">
                <div class="select-list">
                    <ul>
                        <li>
                            学生名称：<input type="text" name="stuname"/>
                        </li>
                        <li>
                           学生性别：<input type="text" name="sex"/>
                        </li>
                        <li>
                            学生班级：<input type="text" name="classname"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="query(1)"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick=""><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" data-toggle="modal" data-target="#myModal" onclick="qingkong()">
                <i class="fa fa-plus"></i> 添加学生
            </a>
            <%--<a class="btn btn-primary single disabled" onclick="" >--%>
            <%--<i class="fa fa-edit"></i> 修改--%>
            <%--</a>--%>
            <%--<a class="btn btn-danger multiple disabled" onclick="" shiro:hasPermission="system:role:remove">--%>
            <%--<i class="fa fa-remove"></i> 删除--%>
            <%--</a>--%>
            <%--<a class="btn btn-warning" onclick="" >--%>
            <%--<i class="fa fa-download"></i> 导出--%>
            <%--</a>--%>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table class="table table-bordered table-hover">
                <caption>学生信息</caption>
                <thead>
                <tr>
                    <th>学生姓名</th>
                    <th>性别</th>
                    <th>电话</th>
                    <th>状态</th>
                    <th>班级</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tb_stu">
                </tbody>
            </table>
            <ul class="pagination">
                <li><span id="pageinfo"></span></li>
                <li><a href="javascript:void(0)" onclick="query(1)">首页</a></li>
                <li><a href="javascript:void(0)" onclick="query(pager.prev)">上页</a></li>
                <li><a href="javascript:void(0)" onclick="query(pager.next)">下页</a></li>
                <li><a href="javascript:void(0)" onclick="query(pager.last)">尾页</a></li>
                <li class="input-group">
                    <input type="number" name="curPage" max="${pager.last}" min="1" step="1" id="txtCurPage"  style="height:28px" />
                    <input type="button" class="button" value="Go" id="btn2"/>
                </li>
                </li>

            </ul>


            <%--模板：html和js 分离--%>
            <script type="text/html" id="op">
                <div class="hidden-sm hidden-xs action-buttons">
                    <%--<a class="view blue" href="#" onclick="showSub()" >--%>
                    <%--<i class="ace-icon fa fa-search-plus "></i>查看--%>
                    <%--</a>--%>
                    <a class="green" href="#" onclick="updateone({stuid})" data-toggle="modal" data-target="#myModal">
                        <i class="ace-icon fa fa-pencil "></i>编辑
                    </a>
                    <a class="red" href="#" onclick="deletestu({stuid1})"  >
                        <i class="ace-icon fa fa-trash-o "></i>删除
                    </a>
                </div>
            </script>
        </div>
    </div>
</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel1">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                <form stu="form" id="form1">
                    <div class="form-group">
                        <label >学生名</label>
                        <input type="hidden" class="form-control" id="stuid" name="stuid" value="0"/>
                        <input type="text" class="form-control" id="stuname" name="stuname" />
                    </div>
                    <div class="form-group">
                        <label >性别</label>
                        <input type="radio" name="sex" id="boy" value="男" />男
                        <input type="radio" name="sex" id="girl" value="女"  />女
                    </div>
                    <div class="form-group">
                        <label >电话</label><input type="text" class="form-control" id="phone" name="phone" />
                    </div>
                    <div class="form-group"><input type="hidden" name="stutate" value="1" id="stutate"/>
                    </div>
                    <div class="form-group">
                        <label>备注</label><input type="text" class="form-control" id="remark" name="remark" />
                    </div>
                    <%--<div class="form-group">--%>
                    <%--<label>创建时间</label><input type="date" class="form-control" id="startTime1" name="startTime1" />--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                    <%--<label >更新时间</label><input type="date" class="form-control" id="endTime1" name="endTime1" />--%>
                    <%--</div>--%>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="add()" data-toggle="modal" data-target="#myModal">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
<script>
    var layer;
    $(function () {
        layui.use('layer',function () {
            layer=layui.layer;
        });
    });
    var pager;
    //查询角色信息
    function query(pageNo){
        $.ajax({
            //请求的地址
            url:"${pageContext.request.contextPath}/student.action?method=query&pageNo="+pageNo,
            //提交方式
            type:"post",
            //携带参数
            data:$("#stuform").serialize(),
            //返回的数据的类型
            dataType:"json",
            //操作成功后的回调函数
            success:function(data){
                $("#tb_stu").empty();//清空
                var list=data.data;    //list集合
                for(var i=0;i<list.length;i++){

                    var info=list[i];//获取每一个信息
                    var stutate=null;
                    if (info.stutate==0)
                    {
                        stutate='已进班';
                    }
                    else {
                        stutate='未进班';
                    }
                    var tr="<tr>" +
                        "<td>"+info.stuname+"</td>" +
                        "<td>"+info.sex+"</td>" +
                        "<td>"+info.phone+"</td>" +
                        "<td>"+stutate+"</td>" +
                        "<td>"+info.classname+"</td>" +
                        "<td>"+info.remark+"</td>" +
                        "<td>"+$("#op").html().replace("{id}",info.stuid).replace("{stuid}",info.stuid).replace("{stuid1}",info.stuid)+"</td>" +
                        "</tr>";
                    $("#tb_stu").append(tr);
                }
                pager=data;
                //初始化页码信息
                var str="总页数:"+data.pages+"/当前页:"+data.pageNo;
                $("#pageinfo").html(str);
                $("#txtCurPage").val(data.curPage);
            },
            error:function (e) {
                alert(e);
            }
        });
    }
    $(function(){
        $("#btn2").click(function(){
            //获取要跳到的页码
            var pageNo=$("#txtCurPage").val();
            if(pageNo>pager.pages) pageNo=pager.pages;
            query(pageNo);
        });
    });
    $(function () {
        query(1);
    });

    function add() {
        $.ajax({

            type: "POST",
            url:"${pageContext.request.contextPath}/student.action?method=add",
            data:$("#form1").serialize(),
            dataType:'json',
            success:function(msg)
            {
                layer.msg("添加成功");
                query(pager.pageNo);
            }
        });
    }

    function deletestu(stuid) {
        $.ajax({
            type:'GET',
            url:"${pageContext.request.contextPath}/student.action?method=deletestu&stuid="+stuid,
            dataType:'json',
            success:function (msg) {
                if (msg=1)
                {
                    layer.msg("删除成功");
                }
                query(pager.pageNo);
            },
            error:function (xhr,info,e) {
                alert("错误"+info+e);
            }
        });
    }
    function updateone(stuid) {
        $.ajax(
            {
                type:'GET',
                url:"${pageContext.request.contextPath}/student.action?method=updateone&stuid="+stuid,
                dataType:'json',
                success:function(msg)
                {
                    $("#stuid").val(msg.stuid);

                    $("#stuname").val(msg.stuname);
                    if (msg.sex=='男')
                    {
                        $("#boy").prop("checked",true);
                    }
                    else {
                        $("#girl").prop("checked",true);
                    }
                    $("#phone").val(msg.phone);
                    $("#stutate").val(msg.stutate);
                    $("#remark").val(msg.remark);

                },
                error:function (xhr,info,e) {
                    alert("错误"+info+e);
                }
            }
        );
    }
    function qingkong() {
        $("#form1")[0].reset();
        $("#stuid").val(0);
    }
</script>
